@header-height: 40px;
@footer-height: 120px;


.pictool-component-mask {
  display: none;
  background: #0000007a;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .pictool-mask-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100%;
    height: 100%;
    width: 100%;
    background: #ffffff;
    transition: 0.6s;
  }

  &.mask-open {
    display: block;
    .pictool-mask-container {
      bottom: 0;
    }
  }

  .pictool-mask-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: @header-height;
    background: #222222;
  }

  .pictool-mask-content {
    position: absolute;
    top: @header-height; 
    bottom: @footer-height;
    width: 100%;
    background: #333333;
  }

  .pictool-mask-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: @footer-height;
    background: #222222;
  }
}